;
(function() {
	var vueTap = {};

  // 判断是否重复, mouseup的时候执行
  const collision = function (a, b) {
    if (b.length === 1) {
      b = b[0]
      var ax = a.offsetLeft;
      var ay = a.offsetTop;
      var aw = a.offsetWidth;
      var ah = a.offsetHeight;
      var bx = b.offsetLeft;
      var by = b.offsetTop;
      var bw = b.offsetWidth;
      var bh = b.offsetHeight;

      const isOverlap = (ax + aw > bx && ax < bx + bw && ay + ah > by && ay < by + bh)
      const fatherEl = b
      return {
        isOverlap,
        fatherEl,
        index: 0
      }
    } else {
      let isOverlap = false
      let fatherEl = {}
      let index = 0
      for (let i = 0;i<b.length;i++) {
        let son = b[i]
        var ax = a.offsetLeft;
        var ay = a.offsetTop;
        var aw = a.offsetWidth;
        var ah = a.offsetHeight;
        var bx = son.offsetLeft;
        var by = son.offsetTop;
        var bw = son.offsetWidth;
        var bh = son.offsetHeight;

        isOverlap = (ax + aw > bx && ax < bx + bw && ay + ah > by && ay < by + bh)
        if (isOverlap) {
          fatherEl = son
          index = i
          return {
            isOverlap,
            fatherEl,
            index
          }
        }
      }
      return {
        isOverlap
      }
    }
  }
	vueTap.install = function(Vue) {
		Vue.directive('drap', {
			acceptStatement: true,
			bind: function() {},
			update: function() {
			},
			inserted: function(el, binding) {
        const callback = binding.value.callback
        const targetElClass = binding.value.targetElClass
        let copyEl = null
        let disX = 0
        let disY = 0
        el.addEventListener('mousedown', function (e) {

          if (e && e.stopPropagation) {//非IE
            e.stopPropagation();
          } else {//IE
            window.event.cancelBubble = true;
          }

          copyEl = el.cloneNode(true)
          el.appendChild(copyEl)
          copyEl.style.zIndex = 2000
          // 复制的元素 追加到el后面去，这样位置就不会偏
          copyEl.style.position = 'absolute'
          copyEl.style.left = '0px'
          copyEl.style.top = '0px'
          disX = e.clientX - copyEl.offsetLeft
          disY = e.clientY - copyEl.offsetTop

          copyEl.addEventListener('mousemove', function (e) {
            var l = e.clientX - disX
            var t = e.clientY - disY
            copyEl.style.left = l+'px'
            copyEl.style.top = t+'px'
          })

          copyEl.addEventListener('mouseup', function (e) {
            const targetEls = document.getElementsByClassName(targetElClass)
            const collisionResult = collision(copyEl, targetEls)
            if (collisionResult.isOverlap === true) {
              const childCopyEl = copyEl.cloneNode(true)
              childCopyEl.style.left = 'auto'
              childCopyEl.style.top = 'auto'
              childCopyEl.style.position = 'relative'
              // vue是数据驱动，所以省略DOM操作
              // collisionResult.fatherEl.appendChild(childCopyEl)
              // el.remove()
              callback(collisionResult.index)
            } else {
              console.log('没接触')
            }
            copyEl.remove()
          })
        })
			},
			unbind: function() {
			}
		});
	}
	module.exports = vueTap;
})();
